<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Input
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-input placeholder="搜索..."/>
      <sui-divider/>
      <sui-input fluid placeholder="搜索..."/>
      <sui-divider/>
      <sui-input transparent placeholder="搜索..."/>
      <sui-divider/>
      <sui-segment inverted>
        <sui-input inverted placeholder="搜索..."/>
      </sui-segment>
      <sui-input size="huge" placeholder="搜索..."/>
      <sui-divider/>
      <sui-input icon="search" placeholder="搜索..."/>
      <sui-divider/>
      <sui-input icon="search" icon-position="left" placeholder="搜索..."/>
      <sui-divider/>
      <sui-input icon="search" icon-position="left" placeholder="搜索..."/>
      <sui-divider/>
      <sui-input icon="search" placeholder="搜索..."/>
      <sui-divider/>
      <sui-input placeholder="搜索" loading/>
      <sui-input placeholder="搜索" loading icon-position="left"/>
      <sui-input placeholder="搜索" type="text" :error="hasError"/>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Input',
  data () {
    return {
      hasError: true
    }
  }
}
</script>

<style scoped>

</style>
